<template>
  <el-form
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
  >

    <template v-for="item  in formItems">
      <el-form-item
        :label="item.label"
        :key="item.prop"
      >
        <el-input
          v-model="formInline[item.prop]"
          :placeholder="'请输入'+item.label"
        ></el-input>

        <!-- <el-select>
        <template v-for="dictData  in item">
        <el-option :label="" :value=""></el-option>
        </template>
      </el-select> -->
      </el-form-item>
    </template>
    <!-- search -->
    <el-form-item>
      <el-button
        type="primary"
        @click="onSubmit"
      >搜索</el-button>
      <el-button @click="clearAll">清空</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { get as _get } from 'lodash'
export default {
  props: {
    formOption: Object
  },
  data() {
    return {
      formInline: {
      },
      formItems: []
    }
  },
  mounted() {
    this.initOption()
  },
  methods: {
    initOption() {
      const itemList = _get(this.formOption, 'itemList', [])
      // itemList=[{
      //     label: '姓名',
      //     prop: 'name',
      //     search: true,
      //   },{
      //     label: '编码',
      //     prop: 'id',
      //     search: false,
      //     type:'select',
      //     dictData:[{name:'1',id:'1'}]
      //   }]

      if (!itemList || !itemList.length) return
      // 生成表单项
      let tempObj = {}
      let tempOption = []
      tempOption = itemList.filter(i => {
        if (i.search) {
          tempObj[i.prop] = ''
          return true
        }
      })
      this.formItems = tempOption
      this.formInline = tempObj

    },
    onSubmit() {
      console.log(this.formInline)
      this.$emit('searchFormData', this.formInline)
    },
    clearAll() {
      this.formInline = {}
      this.$emit('searchFormData', {})
    }
  }
}
</script>
<style scoped>
</style>